<template>
    <div>
        <div class="page-body">
            <div class="page-card">
                <div class="page-card-title">
                    公司初始化 创建导航
                </div>
                <div class="page-card-content">
                    <el-steps :active="active" finish-status="success">
                        <el-step title="创建公司" />
                        <el-step title="配置员工" />
                        <el-step title="同抖音系统绑定" />
                    </el-steps>
                    <div class="page-card-body">
                        <!-- 创建公司 -->
                        <div class="page-card-body-1" v-if="active == 0">
                            <div v-if="cmpForm">
                                <div>
                                    <div style="text-align: center;margin-top:20px">
                                        <el-button type="primary" @click="active = 1">下一步</el-button>
                                    </div>
                                </div>

                            </div>
                            <div v-else>
                                <el-button type="primary" @click="openModalView">点击此处创建公司</el-button>
                            </div>
                        </div>
                        <!-- 创建员工 -->
                        <div class="page-card-body-2" v-if="active == 1">
                            
                        </div>
                    </div>
                </div>

            </div>

        </div>

        <!-- 公司创建 -->
        <cmp-modal-view v-if="isShowFormModalView" ref="formModalViewRef" @submit="onCmpSubmit"
            @close="isShowFormModalView = false"></cmp-modal-view>
    </div>
</template>
  
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
    name: "ChangJianDaoHang",
})
</script>
  
<script lang="ts" setup>
import { ref, nextTick } from "vue";
import CmpModalView from "@/views/pages/Cmp/CmpModalView.vue";
import { CmpDataClass } from "@/model/Cmp";
import CmpCard from "@/views/pages/Cmp/CmpCard.vue";

/**
 * 当前步骤
 */
const active = ref(0);

/**
 * ==================
 * 公司相关
 * ==================
 */


/**
* 弹框是否展示
*/
let isShowFormModalView = ref();

/**
 * 弹框组件
 */
let formModalViewRef = ref();

/**
 * 更新完成的cmp
 */
let cmpForm = ref<null | CmpDataClass>(
    new CmpDataClass({
        "Name": "门店测试",
        "Phone": "18953891019",
        "Address": "山东省泰安市岱岳区粥店泰山大街恒大翡翠华庭16号楼三层及夹层",
        "Longitude": "117.052705",
        "Latitude": "36.187874",
        "City": "泰安市",
        "Logo": "1cb9180ecc5a4a3ba8ff10360e060e7c",
        "CreatePerson": "7649f43082af4e18ad7b71d45e067dab",
        "CreateDate": "2024-02-05 11:32:40.197",
        "UnionGuid": "67967a99e53643549d919b64c417d8c3",
        "Id": 6
    })
)

/**
 * 打开弹框 
 */
function openModalView() {
    isShowFormModalView.value = true;
    nextTick(() => {
        formModalViewRef.value.show({});
    })
}

/**
 * 当cmp更新完成的时候
 */
function onCmpSubmit(value: CmpDataClass) {
    cmpForm.value = value;
}
</script>
  
<style lang="less" scoped>
.page-body {
    padding: 20px;

}

.page-card {
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 50px;
    border-radius: 5px;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.1);
}

.page-card-title {
    text-align: center;
    font-size: 20px;
}

.page-card-content {
    margin-top: 40px;
}

.page-card-body {
    height: 300px;
}

// 创建公司
.page-card-body-1 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    ;
}
</style>